/**
 * @this RXFormMailItem: form 的输入控件
 *
 * @flow
 */
import React, { Component } from 'react'
import { StyleSheet, Text, View } from 'react-native'

import PropTypes from 'prop-types'

import FormStyle from './config/FormStyle'
import FormInput from './config/FormInput'
import RXSeparator from './RXSeparator'

import FormItemHOC from './core/FormItemHOC'
import HitView from './config/HitView/index'

class RXFormMailItem extends Component {
  constructor(props) {
    super(props)
    this.state = {
      value: this.props.value,
    }
    props.value && props.onChange && props.onChange(props.value)
  }

  static propTypes = {
    ...FormInput.propTypes,

    rightValue: PropTypes.string,
    doCloseTip: PropTypes.any,
  }

  static defaultProps = {
    ...FormInput.defaultProps,
    formItemType: 'input',
    placeholder: '请输入',
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const { value } = this.props
    if (value !== nextProps.value) {
      this.setState({ value: nextProps.value })
    }
  }

  onChangeText = (value) => {
    const { onChangeText } = this.props

    if (value !== this.state.value) {
      onChangeText && onChangeText(value)
      this.setState({ value })
    }
  }

  render() {
    let {
      value,
      rightValue,
      valueSize,
      placeholderTextColor,
      placeholderFontSize,
      placeholder,
      ...others
    } = this.props

    const inputStyle = {
      flex: 1,
      color: FormStyle.ItemInputColor,
      fontSize: FormStyle.ItemInputFontSize,
    }

    if (valueSize === undefined) {
      valueSize = FormStyle.ItemInputFontSize
    }

    if (placeholderTextColor === undefined) {
      placeholderTextColor = FormStyle.ItemInputPlaceholderColor
    }

    if (placeholderFontSize === undefined) {
      placeholderFontSize = FormStyle.ItemInputPlaceholderSize
    }

    const selectStyle = {
      color: FormStyle.ItemSelectTitleColor,
      fontSize: FormStyle.ItemSelectFontSize,
      marginRight: FormStyle.ItemSelectTitleMarginLeft,
      textAlign: 'right',
    }

    return (
      <View style={styles.container}>
        <View style={styles.viewStyle}>
          <HitView
            {...others}
            hitStyle={{ justifyContent: 'flex-start' }}
            subView={
              <FormInput
                style={inputStyle}
                placeholderTextColor={placeholderTextColor}
                placeholderFontSize={placeholderFontSize}
                placeholder={placeholder}
                valueSize={valueSize}
                {...others}
                value={this.state.value}
                onChangeText={this.onChangeText}
              />
            }
          />
          <Text style={selectStyle}>{rightValue}</Text>
        </View>
        <RXSeparator />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 20,
    backgroundColor: FormStyle.btnTitleColor,
  },
  viewStyle: {
    height: 50,
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: 'center',
  },
})

export default FormItemHOC(RXFormMailItem)